<template>

  <div :style="'position: fixed;top:0;z-index: 3;width: 100%;background-color: '+(backgroundColor)">
    <div :style="'height: '+(system_status_bar_height)+'px; width: 100%;'"></div>
    <div :style="'height: '+(jiaonang_status_bar_height)+'px; width: 100%;'"
         class="self-flex-ju-start-ai-ce">
      <!-- 大体头部分为三块 -->
      <div style="padding-left: 15px;" class="self-one-third self-flex-ai-ce">
        <text class="cuIcon-back" v-if="isBack" @click="BackPage"></text>
      </div>
      <!-- 标题头内容 -->
      <div :style="'font-size: 13px;color: '+(fontColor)" class="self-one-third self-flex-ju-ce-ai-ce">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      //是否展示返回按钮和home按钮
      isBack: {
        required: false,
        type: [Boolean],
        default: false
      },
      //背景颜色
      backgroundColor: {
        required: false,
        type: [String],
        default: '#ffffff'
      },
      //标题头颜色
      fontColor:{
        required: false,
        type: [String],
        default: '#000000'
      }
    },

    data() {
      return {
        headHeight: 0, //头部总高度
        system_status_bar_height: 0, //定义设备通知栏高度
        jiaonang_status_bar_height: 0 //定义胶囊那一栏的高度
      };
    },
    methods: {
      BackPage() {
        if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
          this.$router.push({
            path: `/${__wxConfig.pages[0]}`,
            reLaunch: true
          });
        } else {
          wx.navigateBack({
            delta: 1
          });
        }
      }
    },
    beforeMount() {
      let self = this;
      let system_info = {};
      //获取设备系统信息 为了拿设备头部通知栏高度
      wx.getSystemInfo({
        success(system) {
          //此方法是微信原生的写法，问我我也不能解释
          system_info = system;
          self.system_status_bar_height = system.statusBarHeight;
        }
      });
      //获取胶囊信息,emmm 这个也是微信原生的写法，问我我也不能解释
      let jiaonang_info = wx.getMenuButtonBoundingClientRect();
      //这个为什么这样计算我是上网查的，问我我也不能解释
      this.jiaonang_status_bar_height =
        jiaonang_info.height +
        (jiaonang_info.top - system_info.statusBarHeight) * 2;
      this.headHeight = this.system_status_bar_height + this.jiaonang_status_bar_height;
    }
  };
</script>

<style scoped>
  .self-flex-ju-ce-ai-ce {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .self-flex-ju-start-ai-ce {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .self-flex-ai-ce {
    display: flex;
    align-items: center;
  }

  .self-one-third {
    width: 33.33%;
    height: 100%;
  }
</style>
